<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img src="" class="image-reveal">
<ul>
<li class="item" data-image="https://images.pexels.com/photos/3323208/pexels-photo-3323208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">DAZED</li>
<li class="item" data-image="https://images.pexels.com/photos/1816606/pexels-photo-1816606.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">MOTION</li>
<li class="item" data-image="https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">IDENTITY</li>
<li class="item" data-image="https://images.pexels.com/photos/3597031/pexels-photo-3597031.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"> BRANDING</li>
<li class="item" data-image=" https://images.pexels.com/photos/3597032/pexels-photo-3597032.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500
">VEMON</li>
</ul>
<script>
const items = document.querySelectorAll('.item')
const image = document.querySelector('img')
items.forEach((el) => {
el.addEventListener('mouseover', (e) => {
imageData = e.target.getAttribute('data-image')
console.log(imageData)
e.target.style.zIndex = 99
image.setAttribute('src', imageData)
})
el.addEventListener('mousemove', (e) => {
image.style.top = e.clientY + 'px'
image.style.left = e.clientX + 'px'
})
el.addEventListener('mouseleave', (e) => {
e.target.style.zIndex = 1
image.setAttribute('src', '')
})
})
